<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体颜色测试</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="styles/jh_dashboard.css">
    <style>
        body {
            background: #f0f0f0;
            padding: 20px;
            font-family: 'Segoe UI', sans-serif;
        }
        
        .test-container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 12px;
        }
        
        .test-header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .test-header h1 {
            color: #1a202c;
            margin-bottom: 10px;
        }
        
        .test-header p {
            color: #718096;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <div class="test-header">
            <h1>🔍 字体颜色测试</h1>
            <p>检验职位卡片的字体颜色是否正确显示</p>
        </div>

        <div id="testCard"></div>
    </div>

    <script>
        // 生成测试职位卡片
        function generateTestCard() {
            return `
                <div class="job-card" data-id="test-job">
                    <div class="job-card-content">
                        <div class="job-card-header">
                            <div class="job-card-title">
                                <h4>前端开发工程师 (React/Vue)</h4>
                                <span class="job-badge">全职</span>
                            </div>
                            <div class="job-match" title="综合匹配度">
                                <span>85</span>
                            </div>
                        </div>
                        
                        <div class="job-card-company">
                            <div class="job-logo">T</div>
                            <span>腾讯科技</span>
                        </div>
                        
                        <div class="job-card-meta">
                            <span><i class="fas fa-map-marker-alt"></i>深圳市</span>
                            <span><i class="fas fa-yen-sign"></i>15K-25K</span>
                            <span><i class="fas fa-clock"></i>1天前</span>
                        </div>
                        
                        <div class="job-card-reasons">
                            <div class="reason">技能匹配度高达85%，完美符合岗位要求</div>
                            <div class="reason">工作地点符合期望</div>
                            <div class="reason">薪资范围在期望区间内</div>
                        </div>
                        
                        <div class="job-card-tags">
                            <span class="job-tag">React</span>
                            <span class="job-tag">Vue.js</span>
                            <span class="job-tag">TypeScript</span>
                            <span class="job-tag">Node.js</span>
                            <span class="job-tag">微信小程序</span>
                        </div>
                        
                        <div class="job-card-actions">
                            <button class="btn btn-outline" data-action="compare">
                                <i class="fas fa-balance-scale"></i> 对比
                            </button>
                            <button class="btn btn-secondary" data-action="favorite">
                                <i class="fas fa-heart"></i> 收藏
                            </button>
                            <button class="btn btn-primary" data-action="detail">
                                <i class="fas fa-eye"></i> 详情
                            </button>
                        </div>
                    </div>
                </div>
            `;
        }

        // 页面加载完成后生成测试卡片
        document.addEventListener('DOMContentLoaded', function() {
            const container = document.getElementById('testCard');
            container.innerHTML = generateTestCard();
            
            console.log('测试卡片已生成，请检查字体颜色是否正确显示');
        });
    </script>
</body>
</html> 